<template>
  <div class="empInformAdd">
    <div class="empInformAdd-tittle">
      <div class="crumbs">
        <p>
          <span>设置 /</span><span> 员工管理 /</span> 编辑员工信息<span></span>
        </p>
        <h3>编辑员工信息</h3>
      </div>
    </div>
    <div class="baseMsg">
      <div class="base-title">基础信息</div>
      <div class="base-content">
        <div class="content-one">
          <span>员工姓名</span
          ><el-input v-model="name" placeholder="请输入" style="width: 400px" />
        </div>
        <div class="content-one">
          <span>登录账号</span
          ><el-input
            v-model="number"
            placeholder="请输入有效手机号码"
            style="width: 400px"
          />
        </div>
        <!-- <div class="content-one">
          <span>员工头像</span>
          <div class="touxiang">
            <el-upload
              class="avatar-uploader"
              name="file"
              list-type="picture-card"
              action="http://172.16.142.23:8077/oss/upload"
              :on-success="handleSuccess"
              :file-list="fileList"
              :multiple="false"
            >
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </div>
        </div> -->
        <div class="content-one">
          <span>员工角色</span>
          <el-select v-model="value1" style="width: 400px" placeholder="请选择">
            <el-option
              v-for="v in options1"
              :key="v.id"
              :label="v.roleName"
              :value="v.id"
            />
          </el-select>
        </div>
        <div class="content-one">
          <span>管理小区</span>
          <el-select v-model="value2" style="width: 400px" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.cellName"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="content-one">
          <span>登录密码</span>
          <el-input
            v-model="password"
            type="password"
            placeholder="请输入"
            style="width: 400px"
          />
        </div>
        <div class="content-one">
          <span>微信</span>
          <el-input v-model="wxNum" placeholder="请输入" style="width: 400px" />
        </div>
        <div class="content-one">
          <span>QQ</span>
          <el-input v-model="qqNum" placeholder="请输入" style="width: 400px" />
        </div>
        <div class="content-one">
          <span>邮箱</span>
          <el-input v-model="email" placeholder="请输入" style="width: 400px" />
        </div>
        <div class="content-one">
          <span>员工介绍</span>
          <el-input
            v-model="textarea"
            :rows="10"
            style="width: 400px"
            type="textarea"
            placeholder="请输入"
          />
        </div>
        <div class="dispose">
          <el-button type="primary" @click="addRole">提交</el-button>
          <el-button type="primary" plain @click="goBacak">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup >
import { ref, onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "../../utils/http";
import timeTrans from "../../utils/time";
import { ElMessage } from "element-plus";



// 上传头像
// import { Plus } from "@element-plus/icons-vue";
// const imageUrl = ref("");
// const fileList = reactive([]);
// //上传成功回调
// const handleSuccess = (res, file) => {
//   console.log("handleSuccessres", res);
//   console.log("handleSuccessfile", file);
//   if (res) {
//     ElMessage.success({
//       message: "上传成功!",
//     });
//   } else {
//     ElMessage.error({
//       message: "上传失败，请重新上传",
//     });
//   }
// };

// const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
//   if (rawFile.size / 1024 / 1024 > 2) {
//     ElMessage.error("图片大小不能超过2MB!");
//     return false;
//   }
//   return true;
// };

const router = useRouter();
const route = useRoute();
const textarea = ref("");

// 员工角色
const value1 = ref("");
let options1 = ref([]);
// 管理小区
const value2 = ref("");
const options2 = ref([]);
const getData = () => {
  axios({
    url: "/role/list",
    method: "get",
  }).then(({ data }) => {
    // console.log(data);
    if (data.code == 0) {
      options1.value = data.data.list;
      // console.log(options1);
    }
  });
  axios({
    url: "/basicInformation/list",
    method: "get",
    params: {
      page: 1,
      limit: 30,
    },
  }).then(({ data }) => {
    // console.log(data);
    if (data.code == 0) {
      options2.value = data.data.list;
      // console.log(options2);
    }
  });
};

getData();
onMounted(() => {});
// 返回
const goBacak = () => {
  router.go(-1);
};

let addPerson = sessionStorage.getItem("user");
let chuAddPerson=addPerson.split('"')

// 提交
const name = ref("");
const number = ref("");
const email = ref("");
const password = ref("");
const qqNum = ref("");
const wxNum = ref("");
const addRole = () => {
  let nowDate = Date.now();
  let getTime = timeTrans(nowDate);
 
  console.log(value2.value, "小区");
  console.log(value1.value, "角色");
  // console.log(chuAddPerson[1],typeof chuAddPerson[1],"uuuu");

  axios({
    url: "/staff/add",
    method: "post",
    data: {
      addPerson: chuAddPerson[1],
      addTime: getTime,
      community: value2.value,
      employeeIntro: textarea.value,
      employeeName: name.value,
      headImage: "",
      mail: email.value,
      pwd: password.value,
      qq: qqNum.value,
      roleId: value1.value,
      username: number.value,
      wx: wxNum.value,
    },
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      router.go(-1);
      ElMessage({
        message: "添加成功",
        type: "success",
      });
    }
  });
};




// 渲染数据
console.log(route.query,"ggggg")


</script>

<style lang="less" scoped>
.empInformAdd {
  width: 90%;
  margin: auto;
  // border: 1px solid red;
  .empInformAdd-tittle {
    // border: 1px solid red;
    background-color: white;
    margin-top: 20px;
    margin-bottom: 20px;
    .crumbs {
      padding: 20px 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      p {
        margin-bottom: 10px;
        span:nth-child(1),
        span:nth-child(2) {
          color: #8d8d8d;
        }
        span:last-child {
          color: #000;
        }
      }
    }
  }
  .baseMsg {
    background-color: white;
    // margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px 20px;
    .base-title {
      margin-bottom: 10px;
    }
    .base-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .content-one {
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        span {
          width: 200px;
          text-align: end;
          margin-right: 15px;
        }
        .touxiang {
          width: 400px;
        }
      }
      .dispose {
        padding: 20px 30px;
        margin-top: 20px;
      }
    }
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  text-align: center;
}
</style>
